<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta content="telephone=no" name="format-detection">
	<meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">

	<script src="E:\js_lib\jquery-2.1.0.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
	<title>选择品牌</title>
	<style type="text/css">
		body,ul,li,p{list-style: none;padding: 0;margin: 0;}
		body{
			background-color:#F1F3FA;
			font-family: "Microsoft Yahei"
		 }
		.topBox{
			width: 100%;
			background-color: white;
			color: #666;
			
		}
		
		.boxList{
			background-color: white;
		}

		.boxTitle,.titleBar{
			padding-left:4%;
			height:35px;
			line-height:35px;
			font-size: 13px;
		}
		.boxContent{
			position: relative;
			width:100%;
			overflow: hidden;
			font-size: 10px;
			height:136px;
			overflow: hidden;
		}
		ul.boxContent>li>img{
			height:16px;

		}
		ul.boxContent>li{
			width:25%;
			text-align: center;
			float: left;
			margin: 14px 0;
		}
		
		.listItem{
			overflow: hidden;
			height: 52px;	

		}
		.listItem>.imgWap{
			width:20%;
			text-align: center;
			display: table-cell;
			height: 51px;	
			line-height: 51px;
			
		}
		.listItem>.imgWap img{
			height:16px;

		}
		.listItem>.showName{
			width:80%;
			height: 51px;	
			line-height: 51px;
			border-bottom: 1px solid #eaeaea;
		}

		.listTitle{
			height: 44px;
			line-height: 44px;
			padding-left:4%;
			color:#666;
			font-size: 15px;
			border-bottom:1px solid  #eaeaea;
		}

		.letterNav{
		    width: 30px;
		    position: fixed;
		    bottom: 0px;
		    right: 0px;
		    background-color: white;
		    font-size: 10px;
		    color: #999;
		    text-align: center;
		    /*长安不选中*/
			-webkit-touch-callout:none;
			-webkit-user-select:none;
			-khtml-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			user-select:none;
		}

		#letterNavTag{
			width:50px;
			height: 50px;
			line-height: 50px;
			border-radius: 25px;
			text-align: center;
			background-color:#ccc;
			color:white;
			position:fixed;
			top:50%;
			left:50%;
			display: none;
		}

		.listWrap{
		    position: absolute;
		    height: 100%;
		    width: 100%;
		    right: 0px;
		    top: 0;
		    left:0;
		    bottom:0;
		    overflow-y: scroll;
		    display: none;
		}
		.listWrap>.content{
			 width: 80%;
			 height: 100%;
			 box-shadow:0px -263px 223px -33px #929292, 0px 228px 223px -33px #929292;
		    background: white;
		}
		.listWrap .title{
			padding-left:4%;
			color:#999;
			font-size: 13px;
			height:35px;
			line-height: 35px;
		}
		.opcityBox{
			width: 20%;
			height: 100%;
			background:rgba(0,0,0,0);
			opcity:0;
		}
		.listWrap .list>li{
			border-bottom:1px solid #eaeaea;
			height:44px;
			line-height: 44px;
			font-size: 13px;
			color:#333;
			padding-left:22px;
		}

		.fl{float:left;	}
		.fr{float:right;}
		.posFix{position:fixed;}

		
	</style>

</head>
<body>

<div id="brandBox">
	<div class="topBox">
		<div class="boxTitle">热门品牌</div>
		<ul class="boxContent">
			<li class="js-brandName">
				<img src="audi.jpg" alt="">
				<p >奥迪</p>
			</li>
			<li class="js-brandName">
				<img src="baoma.jpg" alt="">
				<p >宝马</p>
			</li>
			<li class="js-brandName">
				<img src="audi.jpg" alt="">
				<p >奥迪</p>
			</li>
			<li class="js-brandName">
				<img src="audi.jpg" alt="">
				<p >奥迪</p>
			</li>
			<li class="js-brandName">
				<img src="audi.jpg" alt="">
				<p >奥迪</p>
			</li>
			<li class="js-brandName">
				<img src="audi.jpg" alt="">
				<p >奥迪</p>
			</li>
			<li class="js-brandName">
				<img src="audi.jpg" alt="">
				<p >奥迪</p>
			</li>
			<li class="js-brandName">
				<img src="audi.jpg" alt="">
				<p >奥迪</p>
			</li>
		</ul>
	</div>

	<p class='titleBar'>选择品牌</p>

	<ul class="boxList" id="brandList">
	<li class="listTitle">A</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">B</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">C</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">D</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">E</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">F</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">G</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">H</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">I</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">J</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">O</li>
	<li class="listTitle">Q</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listTitle">T</li>
	<li class="listTitle">Z</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	<li class="listItem js-brandName">
		<div class="fl imgWap"><img class="" src="audi.jpg" alt=""></div>
		<p class="fl showName ">奥迪</p>
	</li>
	</ul>

	<aside class="letterNav" id="letterNav">
	<ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</li>
		<li>F</li>
		<li>G</li>
		<li>H</li>
		<li>I</li>
		<li>J</li>
		<li>K</li>
		<li>L</li>
		<li>M</li>
		<li>N</li>
		<li>O</li>
		<li>P</li>
		<li>Q</li>
		<li>R</li>
		<li>S</li>
		<li>T</li>
		<li>U</li>
		<li>V</li>
		<li>W</li>
		<li>X</li>
		<li>Y</li>
		<li>Z</li>
	</ul>
	</aside>

	<div id="letterNavTag"></div>
</div>



<!-- 车系列表 -->
<div class="listWrap " id="selectSeries">
	<div class="fl opcityBox"></div>
	<div class="fr content">
		<div class="title">选择车系</div>
		<ul class='list'>
			<li>奥迪A4</li>
			<li>奥迪A4L</li>
			<li>奥迪A6</li>
			<li>奥迪A8</li>
			<li>奥迪Q5</li>
			<li>奥迪Q7</li>
		</ul>
	</div>
</div>

<!-- 车型列表 -->
<div class="listWrap" id="selectModel">
	<div class="fl opcityBox" style="width:40%"></div>
	<div class="fr content" style="width:60%">
		<div class="title">选择车型</div>
		<ul class='list'>
			<li>奥迪A4</li>
		</ul>
	</div>
</div>

<script>
	$(function () {
		// 侧边字母导航
		$('#letterNav').on('touchstart',function(e){
			$("html").css('overflow','hidden');
			var text = $(e.target).text();
			$("#letterNavTag").html(text).show();

		}).on('touchend',function(){
			$("html").css('overflow','auto');
			$("#letterNavTag").hide()
		})

		$('#letterNav').on('touchmove',function(e){
			// 计算手指位置，1,获取字母总体高度，计算每个字母对应的位置。
			// 2.根据手指位置判断在哪个字母。
			// 3.显示字母
			
			// console.log(e.currentTarget.offsetTop)
			var touch = e.originalEvent.touches[0];
			var pointX =  Number(touch.pageX);
			var pointY = Number(touch.pageY);
			// console.log('触点坐标',pointX,pointY);
			var totalHeight = $(this).height();
			// console.log('总高度:'+totalHeight);
			var navTop = $(this).offset().top;
			// console.log("元素顶部高度",navTop);
			var letterHeight = totalHeight/26;
			// console.log("字母高度",letterHeight);
			var pointLetterIndex = (pointY-navTop)/letterHeight;
			// console.log("计算的字母索引",pointLetterIndex);

			var letterMap = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

			var getLetter = letterMap.charAt(Math.floor(pointLetterIndex));
			// console.log("字母:"+getLetter);
			var find = $(".listTitle:contains("+getLetter+")");
			if(find.length==0||(pointY-navTop) <= 0){
				// 不显示字母
				$("#letterNavTag").hide();
			}else{
				// 显示字母
				$("#letterNavTag").html(getLetter).show();
				find[0].scrollIntoView()
			}
			e.preventDefault();

		})

		// 品牌点击
		$('.js-brandName').on('click',function(e){
			// getDATA

			$('body')[0].scrollTop=0				
			$('#selectSeries').show();
			// console.log('点击了品牌');
			//防止页面滚动
			stopPageScroll()
			
			e.preventDefault();
			return false;
		})
		$('#selectSeries .opcityBox ,#selectModel .opcityBox').on('click',function(e){
			$(this).parent().hide();
			if($(e.target).is("#selectSeries .opcityBox")){
				$("html").css('overflow','auto');
				reversePageScroll()
			}
			e.preventDefault();
			return false;
		})

		// 点击车系box 隐藏车型box 或点击车系item 显示车型box
		$('#selectSeries li').on('click',function(e){
			
			$('#selectModel').show();
			e.preventDefault();
			return false;
		})

		// 有蒙层时阻止页面滚动
	})
	function stopPageScroll(){
			var height = $(window).height();
			var width = $(window).width();
			$("html,body").css({
				'overflow':'hidden',
				"height":height,
				"width":width
			});
	}
	function reversePageScroll(){
			$("html,body").css({
				'overflow':'auto',
				"height":'auto',
				"width":'auto'
			});
	}
</script>

</body>
</html>